<template>
<view class="o">
	<cu-custom bgColor="bg-gradual-blue" :isBack="true">
		<block slot="backText">返回</block>
		<block slot="content">我的订单</block>
	</cu-custom>	
	<cu-tabs :list="tab" @change="change" :act="tabAct"></cu-tabs>
	<view class="o-list">
		<scroll-view scroll-y @scrolltolower="getList(1)" v-if="list.length || loaded" class="srx">
			<view class="item" v-for="(item, i) in list" :key="i">
				<view class="title">
					<view class="time">
						<image src="/static/time.png"></image>
						<view>{{ item.createtime }}</view>						
					</view>
					<image src="/static/order_c.png" v-if="item.status === 0 && item.sendstatus === 2 && item.is_discuss === 1 || item.status === 1 && item.sendstatus === 2 && item.is_discuss === 1"></image>
					<view class="state">
						<order-status :source="item"></order-status>
					</view>					
				</view>
				<view class="pro">
					<view hover-class="none" v-for="m in item.shop_orders" :key="m.id" @tap="toDetail(item)">
						<image :src="m.default_imgurl"></image>
						<view>
							<view>{{ m.pname }}</view>
							<view class="text-xs text-lgrey margin-top-xs">{{ m.name }}</view>
							<view v-if="shop.type === 1" class="margin-top-xs flex justify-between align-center">
								<text class="text-df text-bold text-price">{{ m.costprice }}</text>
								<text class="text-lgrey text-xs">x{{ m.count }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="price">
					<view><text>共{{ item.rcount }}件商品</text><order-status :type="1" :source="item"></order-status>付款：<text class="text-price text-bold text-df">{{ item.pay_money }}</text></view>
				</view>
				<con-btn :source="item"></con-btn>
			</view>
		</scroll-view>		
		<empty-data v-if="!list.length" class="ax">您还没有相关订单</empty-data>
	</view>
</view>
</template>
<script>
	import { orderList, orderAll, packageOrder } from '@/common/api/users'
	import OrderStatus from './components/status'
	import { mapGetters } from 'vuex'
	import ConBtn from './components/btn'
	export default {
		name: 'olist',
		components: { OrderStatus, ConBtn }, 		
		data () {
			return {
				noData: false,
				loaded: false,
				tabAct: '1',
				list: [],
				line: {
					act: 1
				},
				params: {
					page: 1
				},
				onLine: {
					currtype: 1
				},
				arr:'',
				tab: [
					{ name: '全部', act: 1, idx: '1' },
					{ name: '待付款', act: 2, idx: '2' },
					{ name: '待发货', act: 3, idx: '3' },
					{ name: '待收货', act: 4, idx: '4' },
					{ name: '待评价', act: 5, idx: '5' },
					{ name: '退款/售后', act: 8, idx: '6' }
				]
			}
		},
		onLoad (options) {
			if (this.shop.customer_id === 1192) {
				this.tab.push({ name: '大礼包', act: 0, idx: '7' })
			}
			if (options.act) {
				this.tab.forEach((item, i) => {
					if (+options.act === item.act) {
						this.tabAct = options.act
						this.change(item)
					}
				})
			} else {
				this.getList()
			}
		},
		computed: {
			...mapGetters([
				'shop'
			])
		},
		methods: {
			toDetail (order) {
				if (this.shop.type === 5) {
					let str = order.tag ? `&tag=${order.tag}` : ''
					uni.navigateTo({
						url: '/pages/orders/detail?batchcode='+order.batchcode + str
					})
				} else if (this.shop.type === 1) {
					uni.navigateTo({
						url: '/pages/orders/detail',
						success: () => {
							uni.setStorageSync('onLineDetails', order)
						}
					})
				}
			},
			getBagList () {
				uni.showLoading()
				packageOrder(this.params).then(res => {
					uni.hideLoading()
					this.loaded = true
					if (res.data.length) {
						const bag = res.data
						let data = []
						bag.forEach(item => {
							let list = {}
							list.act = 1
							list.aftersale_type = 0
							list.batchcode = item.batchcode
							list.couponPrice = 0
							list.createtime = item.createtime
							list.decrease_money = 0
							list.expressnum = item.expressnum
							list.id = 0
							list.is_discuss = 0
							list.pay_currency = 0
							list.pay_money = item.package_price
							list.paystatus = item.paystatus
				            list.pid = item.p_id
							list.pname = item.package_name
							list.rcount = item.rcount
							list.return_status = item.return_status
							list.snedMoney = 0
							list.sendstatus = item.sendstatus
							list.shop_orders = [
								{ default_imgurl: item.default_head_imgurl, pname: item.package_name, rcount: item.rcount, now_price: item.package_price }
							]
							list.status = 0
							list.totalprice = item.totalprice
							list.tag = 6
							data.push(list)
						})
						this.noData = false
						this.load = true
						this.list = [...this.list, ...data]
					} else {
						this.$nextTick(() => {
							this.noData = true
							if (this.params.page !== 1) {
								uni.showToast({
									title: '没有更多订单啦>_<',
									icon: 'none'
								})
							}
						})
					}
				})
			},			
			getList (type) {
				if (this.noData) return
				if (type) {
					if (!this.loaded) return			
					this.params.page++
					} else {
					this.list = []
					this.params.page = 1
				}				
				if (this.shop.type === 1) {
					this.getOnlineList()
				} else if (this.shop.type === 5) {
					if (+this.tabAct !== 7) {
						this.getLineList(type)
					} else {
						this.getBagList()
					}
				}
			},
			getLineList (type) {
				uni.showLoading({ mask: true })
				this.loaded = false
				orderList(Object.assign({}, this.params, this.line)).then(res => {
					uni.hideLoading()
				    this.loaded = true
						if (res.length) {
						let data = res.map(item => {
							item.pay_money = this.utils.Fxied(item.pay_money)
							if (item.status == 0 && item.paystatus == 0) { // if this order status is wait to pay
								const create_Time = item.createtime.replace(/-/ig, '/')
								const end_time = new Date(create_Time).getTime() + 24 * 60 * 60 * 1000
								const start_time = new Date().getTime()
								const times = parseInt((end_time - start_time) / 1000)
								if (times <= 0) item.status = -2								
							}
							return item
						})
						this.list = [...this.list, ...data]
					} else {
						this.noData = true
					}
				})				
			},
			getOnlineList () {
				uni.showLoading()
				orderAll(Object.assign({}, this.params, this.onLine)).then(res => {
					uni.hideLoading()
					this.loaded = true
					let result = res && res.length >= 0 ? res : []
					let data = result.map(item => {
						item.shop_orders = item.products.map(k => {
							let o = {}
							o.pname = k.p_name
							o.default_imgurl = k.default_imgurl
							o.introduce = k.introduce
							o.pid = k.pid
							o.costprice = k.costprice
							o.costpriceAll = k.costpriceAll
							o.count = k.num
							k.p_attr_name ? o.name = k.p_attr_name : o.name = ''
							return o
						})
						delete item.products
						item.rcount = item.shop_orders.reduce((total, x) => total + x.count, 0)
						item.pay_money = this.utils.Fxied(item.total)
						return item
					})
					this.list = [...this.list, ...data]
				})
			},
			change (item) {
				this.tabAct = item.idx
				this.loaded = this.noData = false
				this.line.act = item.act
				this.onLine.currtype = item.act
				this.getList()
			}
		},
		
	}
</script>

<style lang="less">
@import '../../common/styles/variables.less';
.fixedBody;
.o {
	height: 100%;
	display: flex;
	flex-direction: column;
	flex-flow: column;
	overflow: hidden;
	& > .o-list {
		position: relative;
		flex: 1;
		overflow: hidden;
		.srx {
			height: 100%;
			.item {
				margin: 15upx 0 0 0;
				.title, .price {
					background-color: white;
					padding:20upx 15upx;
					display: flex;
					justify-content: space-between;
					& > view {
						font-size: 24upx;
						&.state { color: @red }
						&.time {
							display: flex;
							align-items: center;
							image {
								width: 30upx;
								height: 30upx;
								display: block;
								margin-right: 10upx
							}
							& > view {
								font-size:24upx;
								font-weight: 400;
								color: black;								
							}
						}
					}
				}
				.title {
					position: relative;
					& > image {
						position: absolute;
						width: 120upx;
						height: 120upx;
						right: 40upx;
						top: 0;
					}
				}
				.price {
					justify-content: flex-end;
					.border-bottom;
					& > view {
						font-size: 24upx;
						display: flex;
						align-items: center;
						text {
							&:nth-of-type(1) {
								padding-right: 15upx;
							}
							&.m {
								font-size: 26upx;
								font-weight: 600								
							}
						}
					}
				}
				.pro {
					padding: 20upx 15upx;
					& > view {
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						&:not(:last-of-type) {
							margin-bottom: 15upx;
						}
						image {
							width: 140upx;
							height: 140upx;
							display: block;
							margin-right: 20upx;
						}
						& > view {
							flex: 1;
							font-size:@minSize;
						}												
					}
				}
			}
		}
	}
	.ax {  margin: 15upx 0 0 0; }
}
</style>
